<template>
  <div class="stock-detail-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="股票详情"
      left-text="返回"
      left-arrow
      @click-left="handleBack"
      :fixed="false"
    />

    <!-- 股票详情卡片 -->
    <van-card
      class="stock-detail-card"
      v-if="stockDetail && stockDetail.length > 0"
      :title="`股票代码: ${stockCode}`"
    >
      <van-row gutter="10" class="data-grid">
        <van-col span="12">
          <div class="data-item">
            <span class="data-label">获利比例</span>
            <span class="data-value" :class="profitRateClass">
              {{ formatPercentage(stockDetail[0].rate) }}
            </span>
            <div class="data-desc">
              {{ profitRateDesc }}
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="data-item">
            <span class="data-label">平均成本</span>
            <span class="data-value">{{ formatPrice(stockDetail[0].average) }}</span>
            <div class="data-desc">所有持仓者的平均买入价格</div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="data-item">
            <span class="data-label">90成本区间</span>
            <span class="data-value">
              {{ formatPrice(stockDetail[0]['90_low']) }} -
              {{ formatPrice(stockDetail[0]['90_high']) }}
            </span>
            <div class="data-desc">90%持仓者的成本范围</div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="data-item">
            <span class="data-label">90集中度</span>
            <span class="data-value">
              {{ formatPercentage(stockDetail[0]['90_concentration']) }}
            </span>
            <div class="data-desc">
              {{ getConcentrationDesc(stockDetail[0]['90_concentration']) }}
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="data-item">
            <span class="data-label">70成本区间</span>
            <span class="data-value">
              {{ formatPrice(stockDetail[0]['70_low']) }} -
              {{ formatPrice(stockDetail[0]['70_high']) }}
            </span>
            <div class="data-desc">70%持仓者的成本范围</div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="data-item">
            <span class="data-label">70集中度</span>
            <span class="data-value">
              {{ formatPercentage(stockDetail[0]['70_concentration']) }}
            </span>
            <div class="data-desc">
              {{ getConcentrationDesc(stockDetail[0]['70_concentration']) }}
            </div>
          </div>
        </van-col>
      </van-row>

      <!-- 指标分析 -->
      <div class="analysis-section">
        <h3>指标分析</h3>
        <van-cell-group>
          <van-cell title="市场情绪" :value="getMarketSentiment(stockDetail[0].rate)" is-link />
        </van-cell-group>
      </div>
    </van-card>

    <!-- 加载中 -->
    <van-loading v-if="loading" class="loading-container" type="spinner" />

    <!-- 错误提示 -->
    <van-empty v-if="error && !loading" :description="errorMsg" />

    <!-- 无数据提示 -->
    <van-empty v-if="!loading && !stockDetail && !error" description="请输入股票代码查询详情" />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getStockDetail } from '@/request/api'
import type { StockDetail } from '@/request/api'

const route = useRoute()
const router = useRouter()

// 股票代码
const stockCode = ref<string>((route.query.code as string) || '')
// 股票详情数据
const stockDetail = ref<StockDetail[] | null>(null)
// 加载状态
const loading = ref<boolean>(false)
// 错误状态
const error = ref<boolean>(false)
const errorMsg = ref<string>('')

// 处理返回
const handleBack = () => {
  router.back()
}

// 格式化百分比
const formatPercentage = (value: number) => {
  return (value * 100).toFixed(2) + '%'
}

// 格式化价格
const formatPrice = (value: number) => {
  return value.toFixed(2)
}

// 计算获利比例相关数据
const profitRateClass = computed(() => {
  if (!stockDetail.value || stockDetail.value.length === 0) return ''
  const rate = stockDetail.value[0].rate
  if (rate > 0.8) return 'high-profit'
  if (rate < 0.2) return 'low-profit'
  return ''
})

const profitRateDesc = computed(() => {
  if (!stockDetail.value || stockDetail.value.length === 0) return ''
  const rate = stockDetail.value[0].rate
  if (rate > 0.8) return '警惕抛压'
  if (rate < 0.2) return '可能见底'
  return '市场情绪中性'
})

// 获取集中度描述
const getConcentrationDesc = (concentration: number) => {
  if (concentration < 0.15) return '筹码集中，主力控盘概率高'
  if (concentration > 0.3) return '筹码分散，市场分歧大'
  return '筹码集中度适中'
}

// 获取市场情绪
const getMarketSentiment = (rate: number) => {
  if (rate > 0.8) return '强烈看多，警惕回调'
  if (rate > 0.6) return '看多情绪占优'
  if (rate > 0.4) return '市场情绪中性'
  if (rate > 0.2) return '看空情绪占优'
  return '强烈看空，可能反转'
}

// 获取股票详情
const fetchStockDetail = async () => {
  loading.value = true
  error.value = false
  try {
    const response = await getStockDetail(route.query.code as string)
    if (response.data.success && response.data.data && response.data.data.length > 0) {
      stockDetail.value = response.data.data
    } else {
      error.value = true
      errorMsg.value = response.data.msg || '未找到股票数据'
    }
  } catch (err) {
    error.value = true
    errorMsg.value = '获取数据失败，请稍后重试'
    console.error('获取股票详情失败:', err)
  } finally {
    loading.value = false
  }
}

// 当路由参数中的code变化时，自动查询
onMounted(() => {
  fetchStockDetail()
})

// 监听路由参数变化
watch(
  () => route.query.code,
  (newCode) => {
    if (newCode && newCode !== stockCode.value) {
      stockCode.value = newCode as string
      fetchStockDetail()
    }
  },
)
</script>

<style lang="scss" scoped>
.stock-detail-container {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.code-input-group {
  margin-bottom: 16px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.search-button {
  width: 100%;
  margin-top: 8px;
}

.stock-detail-card {
  margin-bottom: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.data-grid {
  padding: 8px 0;
}

.data-item {
  padding: 8px;
  border-radius: 4px;
  background-color: #f9f9f9;
  margin-bottom: 8px;
}

.data-label {
  font-size: 14px;
  color: #666;
  display: block;
  margin-bottom: 4px;
}

.data-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: block;
}

.data-desc {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  line-height: 1.4;
}

.high-profit {
  color: #ff4d4f;
}

.low-profit {
  color: #52c41a;
}

.analysis-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.analysis-section h3 {
  margin-bottom: 8px;
  font-size: 16px;
  color: #333;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
</style>
